<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="../js/lib-master/index.js"></script>
  
    <link rel="stylesheet" href="../js/lib-master/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/Backstage.css">
    <script src="/js/jquery.js"></script>
</head>
<body>
    <div id="app">
        <div class="product-list" v-if="!showInfo"> 
        产品类型：&nbsp;
        <el-select v-model="productType"  placeholder="请选择"  @change="getAllCategoryName">
          <el-option v-for="item in categoryData" :key="item.categoryID" :label="item.categoryName" :value="item.categoryName">{{item.categoryName}}</el-option>
        </el-select>
        &nbsp;
        输入搜索：
        <el-input placeholder="输入商品名字" prefix-icon="el-icon-search" v-model="productName" style="width: 300px;"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getAllProductName()" >搜索</el-button>
        
        <br>
        <el-table :data="tableData" style="width: 100%;" @row-click="getProductDetail" >
          <el-table-column prop="productID" label="编号" @click.native="getProductDetail(scope.row)"></el-table-column>
          <el-table-column prop="productPictureList" label="图片">
            <template slot-scope="scope">
            <img :src="getImgUrl(scope.row.productPictureList)" min-width="70px" height="70px">
            </template>
          </el-table-column>
          <el-table-column prop="productName" label="名称">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>商品名称: {{ scope.row.productName }}</p>
                <p>商品简介: {{ scope.row.productDescribe }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.productName }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="分类"></el-table-column>
          
          <el-table-column prop="productPrice" label="底价"></el-table-column>
          <el-table-column prop="productDate" label="发售时间"></el-table-column>
          <el-table-column prop="productAmount" label="库存数量"></el-table-column>
          <el-table-column prop="statusText" label="上架/下架"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click.native.prevent="proEdit(scope.row,scope.$index)">编辑</el-button>
              <el-button type="text" style="color: red;" size="mini" @click.prevent="proDelete(scope.$index,scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>

        <div class="info_list" v-if="showInfo">
          <i class="el-icon-back" style="font-size: 20px;" @click="showInfo=false"></i>
  
          <el-table :data="productInfoList" style="width: 100%;"  >
            <el-table-column prop="productDetailID" label="编号" ></el-table-column>
            <el-table-column prop="productDetailPicture" label="图片">
              <template slot-scope="scope">
              <img :src="getImgUrl(scope.row.productDetailPicture)" min-width="70px" height="70px">
              </template>
            </el-table-column>
            <el-table-column v-if="false"></el-table-column>
            <el-table-column prop="attributeList" label="规格" ></el-table-column>
            <el-table-column prop="productDetailPrice" label="价格"></el-table-column>
            <el-table-column prop="productDetailAmount" label="库存数量"></el-table-column>
            <el-table-column prop="statusText" label="上架/下架"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click.native.prevent="proEdit(scope.row,scope.$index)">编辑</el-button>
                <el-button type="text" style="color: red;" size="mini" @click.prevent="proDelete(scope.$index,scope.row)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
    </div>
    <script src="/js/backcommon.js"></script>
    <script>

    let vm = new Vue({
        el: "#app",
        data: {
            tableData: [],
            categoryData:[],
            productInfoList:[],
            showInfo:false,
            pageNo:1,
            pageSize:5,
            totalCount:4,
            productType: '',
            productName:''
            },
          
            created: function () {
                this.getAllCategory()
                this.getAllProduct()
            },
            
            
            methods: {
                getAllCategory(){
                  axios.get("/category/getAll").then(function (resp) {
                    vm.categoryData = resp.data.data
                  });
                },
                getAllProduct(){
                  axios.get("/product/getAll").then(function (resp) {
                    vm.tableData = resp.data.data
                    vm.handPictureList(vm.tableData)
                  });
                },
                getAllCategoryName(){
                  axios.get("/product/typeAll",{params:{typeName:vm.productType}}).then(function (resp) {
                    vm.tableData = resp.data.data
                  });
                },
                getAllProductName(){
                  axios.get("/product/getAllName",{params:{name:vm.productName}}).then(function (resp) {
                    vm.tableData = resp.data.data
                  });
                },
                getImgUrl(fileName){
                  return 'http://localhost:8080/xiaomi/file/download?filename='+fileName
                },
                //行点击事件
                getProductDetail(row){
                  axios.get("/info/list",{params:{productID:row.productID}}).then(function(resp){
                    vm.productInfoList=resp.data.data
                    if(vm.productInfoList!=null){
                      vm.showInfo=true;
                    }
                    
                  })
                  
                },
                handPictureList(data){
                  for(var index in data){
                    pictureList=data[index].productPictureList.split(',');
                    if(pictureList.length>1){
                      data[index].productPictureList=pictureList[0]
                    }
                  }
                }
                
                
                
            }
    })
</script>
</body>
</html>